<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
}

body {
	margin: 10px;
	font-size: 13px;
}

h3 {
	background-color: #ffc600;
	width: 100px;
	padding-top: 3px;
	text-align: center;
	font-size: 16px;
	color: white;
	padding-bottom: 3px;
}

ul {
	width: 300px;
	border-top: 1px solid #ffc600;
	/* border-top-color: red; */
}
li {
	list-style-type: none;
	border-bottom: 1px solid gray;
	padding: 5px;
	/* padding-left: 30px; */
}

a {
	text-decoration: none;
	color: #a9aab1;
	position: relative;
	display: block; /*让链接以块状呈现，这样不用点中链接文字就可以响应链接*/
}

a:hover {
	color: #0039ff;
}

a .content{
	display:none;
}

a:hover .content {
 	display: block; /*这句重要啊，因为本来是隐藏的，现在要显示出来*/
	position: absolute;
	left: 100px;
	top: 22px;
	border: 1px solid #00c0ff;
	background-color: #d2f1f3;
	width: 350px;
}

a:hover .content .contentleft{/*可以直接写.contentleft*/
	padding:20px;
	width:80px;
	height:80px;
	float:left;
}

a:hover .content .contentright{/*可以直接写.contentright*/
	width:200px;
	height:100px;
	float:left;
	padding-top: 10px;
}

a:hover .content img{/*可以直接写img*/
	width:80px;
	height:80px;
}
</style>
</head>
<body>
<h3>最新歌曲</h3>
<ul>
	<li>
		<a href="#">01&nbsp;&nbsp;爱的文身
			<div class="content" >
				<div class="contentleft" ><img alt="" src="http://imgcache.qq.com/music/photo/singer/54/singerpic_5554_0.jpg"></div>
				<div class="contentright">
					<dl>
						<dd>
							<span>歌名:</span>爱的文身
						</dd>
						<dd>
							<span>歌手:</span>黄圣依
						</dd>
						<dd>
							<span>介绍:</span>黄圣依唱片主打歌的确是她个人的内心写照，《爱的文身》由香港音乐大师金培达作曲，制作人陈少琪亲自填词。
						</dd>
					</dl>
				</div>
			</div>
		</a>

	</li>
	<li>
		<a href="#">02&nbsp;&nbsp;爱的次身
			<div class="content" >
				<div class="contentleft" ><img alt="" src="http://imgcache.qq.com/music/photo/singer/47/singerpic_6547_0.jpg"></div>
				<div class="contentright">
					<dl>
						<dd>
							<span>歌名:</span>爱的文身
						</dd>
						<dd>
							<span>歌手:</span>黄圣依
						</dd>
						<dd>
							<span>介绍:</span>黄圣依唱片主打歌的确是她个人的内心写照，《爱的文身》由香港音乐大师金培达作曲，制作人陈少琪亲自填词。
						</dd>
					</dl>
				</div>
			</div>
		
		</a>
	</li>
	
	<li>
			
		<a href="#">03&nbsp;&nbsp;爱的术身
		
		</a>
	</li>
	
</ul>

</body>
</html>